<template>
    <div>
        <AFormModel
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :layout="layout"
            v-bind="{ ...defaultCol, ...$attrs }"
        >
            <ARow type="flex" :gutter="24" align="middle">
                <template v-for="field in fieldsData || fields">
                    <ACol
                        :key="field.key"
                        :span="
                            layout === 'inline'
                                ? ''
                                : field.colAttrs?.span || 24
                        "
                    >
                        <!--  :label="field.label || field.key" -->
                        <AFormModelItem
                            :key="field.key"
                            :prop="field.key"
                            v-bind="field.formModelItemAttrs"
                        >
                            <template #label>
                                <span
                                    class="form-item_label"
                                    :style="{
                                        width:
                                            `${field.labelWidth}px` || '100%',
                                    }"
                                    >{{ field.label || field.key }}</span
                                >
                            </template>
                            <component
                                v-bind="{
                                    ...field.attrs,
                                    disabled:
                                        (field.attrs && field.attrs.disabled) ||
                                        isView,
                                }"
                                :is="field.el"
                                v-model="form[field.key]"
                                :placeholder="
                                    (field.attrs && field.attrs.placeholder) ||
                                    field.label ||
                                    field.key
                                "
                                :style="{ width: field.width ? field.width + 'px' : '100%' }"
                                v-on="field.on"
                            />
                        </AFormModelItem>
                    </ACol>
                </template>
                <ACol
                    v-if="layout === 'inline'"
                    :span="layout === 'inline' ? '' : 24"
                >
                    <AFormModelItem>
                        <AButton
                            type="primary"
                            icon="search"
                            style="margin-right: 10px"
                            @click="search"
                            >{{ searchText }}</AButton
                        >
                        <AButton icon="reload" @click="search(false)">
                            {{ cancelText }}
                        </AButton>
                    </AFormModelItem>
                </ACol>
            </ARow>
        </AFormModel>
    </div>
</template>

<script>
import { cloneDeep } from "lodash-es";
import props from "./props";
import { useFormRules, useResetFormData } from "./hooks";
export default {
    name: "VModelForm",
    mixins: [props],
    data() {
        return {
            form: {},
            rules: {},
            fieldsData: [],
        };
    },
    computed: {
        defaultCol() {
            const config = {
                horizontal: {
                    "label-col": { span: 4 },
                    "wrapper-col": { span: 20 },
                },
                inline: {
                    "label-col": {},
                    "wrapper-col": {},
                },
                vertical: {
                    "label-col": { lg: 24 },
                    "wrapper-col": { lg: 24 },
                },
            };
            return config[this.layout];
        },
    },
    watch: {
        formData: {
            handler(newVal) {
                this.$nextTick(() => {
                    this.form = cloneDeep(newVal);
                });
            },
            deep: true,
            immediate: true,
        },
        fields: {
            handler(newVal) {
                this.fieldsData = newVal.filter((x) => x?.show !== false);

                if (Array.isArray(this.fieldsData) && this.fieldsData.length) {
                    this.rules = useFormRules(this.fieldsData);
                    this.form = useResetFormData(this.fieldsData, this.form);
                }
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        async onSubmit() {
            return new Promise((resolve) => {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        resolve(cloneDeep(this.form));
                    } else {
                        return false;
                    }
                });
            });
        },
        search(reset) {
            if (!reset) {
                Object.entries(this.form).forEach(([k]) => {
                    this.form[k] = undefined;
                });
            }
            this.$emit("search", cloneDeep(this.form));
            this.resetForm();
        },
        resetForm() {
            this.$refs.ruleForm.resetFields();
        },
    },
};
</script>

<style lang="less" scoped>
.form-item_label {
    display: inline-block;
}
</style>
